<!DOCTYPE html>
<html lang="zh-Hans">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>曹运美—前端开发—2020</title>
    <link rel="icon" href="./img/favicon.ico" />
    <link rel="stylesheet" href="./css/main.css" media="(min-width:426px)" />
    <link rel="stylesheet" href="./css/phone.css" media="(max-width:425px)" />
    <link rel="stylesheet" href="./css/print.css" media="print" />
  </head>

  <body>
    <div id="page" class="layout">
      <header>
        <div class="resume-link">
          <a href="https://github.com/cym2050/resume-2020"></a>
        </div>
        <h1>曹 运 美</h1>
        <p>我是你需要的前端工程师</p>
      </header>
      <aside>
        <div class="avader">
          <img src="./img/photo.jpg" alt="头像"/>
        </div>
        <section>
          <div class="personal">
            <h2>基本信息</h2>
            <div class="item">
              <span>年龄</span>
              <span>24</span>
            </div>
            <div class="item">
              <span>学校</span>
              <span>南华大学</span>
            </div>
            <div class="item">
              <span>邮箱</span>
              <span>cym2050@foxmail.com</span>
            </div>
            <div class="item">
              <span>电话</span>
              <span>182 1600 7789</span>
            </div>
            <div class="item">
              <span>所在地</span>
              <span>广州</span>
            </div>
          </div>
        </section>
        
        <section>
          <div class="skills">
            <h2>相关技能</h2>
            <div class="item">
              <p class="keyword">JavaScript/ HTML 5/ CSS 3/ ES6</p>
              <p class="rule"><i style="width: 75%"></i></p>
            </div>
            <div class="item">
              <p class="keyword">React / Redux / React Router / React Hooks</p>
              <p class="rule"><i style="width: 70%"></i></p>
            </div>
            <div class="item">
              <p class="keyword">Vue.js/ Vuex/ Vue Router</p>
              <p class="rule"><i style="width: 65%"></i></p>
            </div>
            <div class="item">
              <p class="keyword">Node.js/ TypeScript / Express</p>
              <p class="rule"><i style="width: 40%"></i></p>
            </div>
            <div class="item">
              <p class="keyword"> Sass / styled-components</p>
              <p class="rule"><i style="width: 80%"></i></p>
            </div>
          </div>
        </section>
        <section>
          <div class="more">
            <h2>了解更多</h2>
            <div class="item">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-blog"></use>
              </svg>
              <span class="link"><a href="https://www.zhihu.com/people/pi-nuo-cao-14-69">博客主页</a></span>
            </div>
            <div class="item">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-github"></use>
              </svg>
              <span class="link"><a href="https://github.com/cym2050">GitHub 主页</a></span>
            </div>
            <!-- <div class="item">
              <span class="link"><a href="https://cym2050.github.io/resume-2020/">简历在线版</a></span
              >
            </div> -->
          </div>
        </section>
      </aside>
      <main>
        <section>
          <h2>项目经历</h2>

          <div class="item">
            <h3>蜂鸟 UI</h3>
            <img src="./img/hummer-ui-vue.png" alt="蜂鸟 UI" />
            <ul>
              <li>
                <strong>项目介绍：</strong>
                <span>
                  造轮子，一款完全基于 Vue 3 与 typescript 的 UI 组件库，已发布到 npmjs.org，目前已有 Button、Switch、Tabs、Dialog 等常用的 UI 组件，通过此项目深入研究 Vue 3，使用了 setup、onMounted、watchEffect、ref、computed 等 Composition API。
                  同时使用了 vite / Vue Router 开发了官方文档，可在线查看代码实例，并支持PC 与手机浏览。
                </span>
              </li>
              <li>
                <strong>项目源码：</strong
                ><a href="https://github.com/cym2050/hummer-ui-vue"
                  >github.com/cym2050/hummer-ui-vue</a
                >
              </li>
              <li>
                <strong>浏览链接：</strong
                ><a href="http://cym2050.gitee.io/hummer-ui-vue"
                  >http://cym2050.gitee.io/hummer-ui-vue</a
                >
              </li>
            </ul>
          </div>

          <div class="item">
            <h3>人脸识别</h3>
            <img src="./img/face-recognition.gif" alt="FaceRecognition" />
            <ul>
              <li>
                <strong>项目介绍：</strong>
                <span>
                  <span class="highlight"></span>
                  这个项目主要实现了<span class="highlight">注册、登录、识别</span>照片中人脸并<span class="highlight">标注、记录</span>用户识别次数等功能。
                  项目设计了良好的目录布局，遵循<span class="highlight"> React 组件化</span>的思想，并尽量使用函数组件，其由入口文件、容器组件、功能组件构成。前端基于 React 库，采用<span class="highlight"> create-react-app 脚手架</span>生成项目结构，<span class="highlight">分析</span>项目状态复杂度后采用了 React 原生的<span class="highlight"> state、setState </span>来做状态管理和路由，将部分组件的<span class="highlight">状态提升</span>至父组件实现不同子组件之间通信。使用<span class="highlight"> Flex </span>和<span class="highlight"> tachyons、react-particles-js </span>轻量 UI 库快速生成样式，并使用了自己的开源项目线性背景生成。后端基于<span class="highlight"> NodeJS </span>与<span class="highlight"> Express </span>，使用<span class="highlight"> bcrypt.js </span>加密用户密码，使用<span class="highlight"> PostgreSQL </span>数据库存储用户信息。人脸识别使用了 Clarifai 服务商提供的<span class="highlight"> api </span>接口。项目可线上访问，部署在<span class="highlight"> heroku </span>平台上。
                </span>
              </li>
              <li>
                <strong
                  >技术栈：React / NodeJs / Express / PostgreSQL </strong
                >
              </li>
              <li>
                <strong>项目源码：</strong
                ><a href="https://github.com/cym2050/faceRecognition"
                  >github.com/cym2050/faceRecognition</a
                >
              </li>
              <li>
                <strong>浏览链接：</strong
                ><a href="https://cym2050.github.io/faceRecognition/"
                  >cym2050.github.io/faceRecognition/</a
                >
              </li>
            </ul>
          </div>

          <div class="item">
            <h3>极简记账</h3>
            <img src="./img/money.png" alt="money" />
            <ul>
              <li>
                <strong>项目介绍：</strong>
                <span>
                  <span class="highlight"></span>
                  做此项目实现的是自己的记账需求，特点是快速记账、统计、标签管理。
                  这个项目使用了<span class="highlight">Typescript</span>语言，实践用<span class="highlight">React Router</span>做路由实现标签管理、编辑页，记账页，统计页的跳转，使用<span class="highlight">自定义Hooks</span>做全局状态管理，将标签，记账记录使用<span class="highlight">localStorage</span>做数据本地持久化。同时使用<span class="highlight">styled-components</span>库作为<span class="highlight">CSS-IN-JS</span>的布局样式的方案符合React的组件化思想，使用<span class="highlight">SCSS</span>作为预处理器有效减少CSS的冗余。同时程序中可以复用的如按钮、输入框等进行组件化以便复用。
                </span>
              </li>
              <li>
                <strong
                  >技术栈：React / TypeScript / React Router / React Hooks</strong
                >
              </li>
              <li>
                <strong>项目源码：</strong
                ><a href="https://github.com/cym2050/P-minimalist-money"
                  >github.com/cym2050/P-minimalist-money</a
                >
              </li>
              <li>
                <strong>浏览链接：</strong
                ><a href="https://cym2050.github.io/P-minimalist-money/"
                  >cym2050.github.io/P-minimalist-money/</a
                >
              </li>
            </ul>
          </div>

          <div class="item">
            <h3>Robot-Friends</h3>
            <img src="./img/robot-search.gif" alt="robot-friends" />
            <ul>
              <li>
                <strong>项目介绍：</strong>
                <span>
                  <span class="highlight"></span>
                  项目从远程API获取一组用户信息，生成不同的好玩的机器人相片，可以搜索用户名获取不同相片，
                  该项目主要是对<span class="highlight">React-Redux</span>的实践，用<span class="highlight">Redux</span>生成<span class="highlight">store</span>全局管理状态，使用<span class="highlight">React-Redux</span>提供的<span class="highlight">connect</span>方法从UI组件生成容器组件，使用<span class="highlight">Provider</span>方法使得包裹下的组件全部可以访问<span class="highlight">State</span>而不需要将State作为props一级级的向深层组件传递，并用<span class="highlight">mapStateToProps</span>将组件的state映射为props，用<span class="highlight">mapDispatchToProps</span>将对组件的操作映射为<span class="highlight">Action</span>。应用中间件<span class="highlight">redux-thunk</span>使得<span class="highlight">dispatch</span>
                  可以传递函数类型的Action，用来处理<span class="highlight">Ajax</span>异步请求获取api的机器人数据.
                </span>
              </li>
              <li>
                <strong
                  >技术栈：React/ Redux / React Redux</strong
                >
              </li>
              <li>
                <strong>项目源码：</strong
                ><a href="https://github.com/cym2050/P-react-robofriends"
                  >github.com/cym2050/P-react-robofriends</a
                >
              </li>
              <li>
                <strong>浏览链接：</strong
                ><a href="https://cym2050.github.io/P-react-robofriends"
                  >cym2050.github.io/P-react-robofriends</a
                >
              </li>
            </ul>
          </div>

          <h2>开源项目</h2>

          <div class="item">
            <h3>线性渐变背景生成器</h3>
            <img src="./img/background-generator.png" alt="线性渐变背景生成器" />
            <ul>
              <li>
                <strong>项目介绍：</strong>
                <span>
                  这个实现通过鼠标选取两个颜色，然后生成从左至右、颜色渐变的超级好看的渐变色网页背景，并能输出背景的CSS样式代码。项目主要使用<span class="highlight">原生DOM操作</span>获取文档节点，获取颜色输入后，更改样式属性，然后生成linear-gradient背景并在网页上输出CSS样式代码供用户使用。
                </span>
              </li>
              <li>
                <strong>项目源码：</strong
                ><a href="https://github.com/cym2050/P-JS-DOM-backgroundgenerator"
                  >github.com/cym2050/P-JS-DOM-backgroundgenerator</a
                >
              </li>
              <li>
                <strong>浏览链接：</strong
                ><a href="https://cym2050.github.io/P-JS-DOM-backgroundgenerator"
                  >cym2050.github.io/P-JS-DOM-backgroundgenerator</a
                >
              </li>
            </ul>
          </div>

          <div class="item">
            <h3>速写画板</h3>
            <img src="./img/sketch.png" alt="速写画板" />
            <ul>
              <li>
                <strong>项目介绍：</strong>
                <span>
                  画板适配了电脑端与移动端，在电脑端使用鼠标进行图像绘制，移动端使用触摸也可以绘制图像。实现了画笔、橡皮擦、颜色选取、画笔粗细、清屏、作为图片下载等功能。主要实践使用canvas api。
                </span>
              </li>
              <li>
                <strong>项目源码：</strong
                ><a href="https://github.com/cym2050/drawing-board"
                  >github.com/cym2050/drawing-board</a
                >
              </li>
              <li>
                <strong>浏览链接：</strong
                ><a href="http://cym2050.gitee.io/sketch"
                  >http://cym2050.gitee.io/sketch</a
                >
              </li>
            </ul>
          </div>

        <section>
          <h2>关于我</h2>
          <p>
            熟悉 HTML5 常用标签，熟悉 标签语义化 并使用在具体项目中。
          <p>
            熟悉 CSS3 包括 盒模型 / Flex / Grid布局 / CSS3动画 / Canvas 等，熟悉 styled-components，了解 Sass ，Less 预处理器。
          </p>
          <p>
            熟悉使用 Flex / rem / Less / 媒体查询 制作移动端适配页面。
          </p>
          <p>
            熟悉原生 JavaScript 编程包括 闭包 / 原型链 / this 指针等， 熟悉 ES6新特性 包括 let / promise / class / 解构赋值等。掌握并在项目中使用 TypeScript 编程。
          </p>
          <p>
            熟练掌握 React全家桶 的使用，包括 create-react-app / Redux / React Redux / ReactRouter / ReactHooks 等。
          </p>
          <p>
            熟悉 Vue 生态的使用，包括 Vue.js、Vuex、Vue Router。熟悉并在具体项目中使用 Vue3。
          </p>
          <p>
            熟悉 Yarn、Npm、Git ，能够使用 Node.js 搭配 Express 进行基本后台开发。
          </p>
          <p>
            了解 webpack 等前端前端工程化工具，并实际使用 webpack 打包过项目。
          </p>
        </section>
      </main>
      <footer>

      </footer>
    </div>
    <script src="//at.alicdn.com/t/font_2108950_db1tfrau7f6.js"></script>
  </body>
</html>
